<template>
  <div class="box">
    <h1>演示辅助函数{{ num }}</h1>
    <div v-for="(item, index) in fgoods" :key="index">
      名称:{{ item.name }} -- 价格:{{ item.price }}
    </div>
    <van-button type="primary" @click="handlePlus">数字+</van-button>
    <van-button type="primary" @click="handleMinu(20)">数字-</van-button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import { myMapMutations } from "./mapTest";
export default {
  computed: {
    // count() {
    //     return this.$store.state.count.num;
    // },
    // goods() {
    //     return this.$store.state.goodsModule.goods;
    // },
    // 等价于
    ...mapState({
      //拓展运算符
      num: (state) => state.count.num,
      goods: (state) => state.goodsModule.goods,
    }),
    ...mapGetters({
      fgoods: "goodsModule/filterGoods",
    }),
  },
  methods: {
    // handlePlus() {
    //   this.$store.commit("count/increment"); //触发mutations执行
    // },
    // ...mapMutations({
    //   handlePlus: "count/increment",
    //   handleMinu: "count/decrement",
    // }),
    ...myMapMutations({
      handlePlus: "count/increment",
      handleMinu: "count/decrement",
    }),
    ...mapActions({
      categoryAct: "category/categoryAction",
    }),
  },
  created() {
    this.categoryAct();
  },
};
</script>

<style lang="scss" scoped>
.box {
  height: 400px;
  border: 1px solid #333;
  font-size: 3rem;
}
</style>
